<template>
  <page-frame>
    <div class="viewRoomStandard">
      <div class="toptitle">
        <div class="left">房间标准 - 详情<span class="room-left">*</span></div>
        <div class="right">
          <div class="btns">
            <el-button @click="toRoomStandard" class="">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <el-row>
        <el-col :span="12">
          <el-form label-width="120px" v-if="roomStandard">
            <div class="room-info-left">房间标准信息</div>
            <el-form-item style="margin-top: 100px" label="房间类型">
              <el-input v-model="roomStandard.rmTypeName"></el-input>
            </el-form-item>
            <el-form-item label="房间标准名称">
              <el-input v-model="roomStandard.rmStdName"></el-input>
            </el-form-item>
            <el-form-item label="床位数">
              <el-input class="input-style" v-model="roomStandard.bedCount"></el-input>
              <span class="span-style">张</span>
            </el-form-item>
            <el-form-item label="床位单价">
              <el-input class="input-style" v-model="roomStandard.price"></el-input>
              <span class="span-style">￥</span>
            </el-form-item>
            <el-form-item label="面积">
              <el-input class="input-style" v-model="roomStandard.rmStdArea"></el-input>
              <span class="span-style">㎡</span>
            </el-form-item>
            <el-form-item label="房间配备">
              <el-input class="input-style" v-model="roomStandard.rmEq"></el-input>
            </el-form-item>
            <el-form-item label="描述">
              <el-input placeholder="请输入描述" v-model="roomStandard.description"></el-input>
            </el-form-item>
          </el-form>

        </el-col>
        <el-col :span="12">
          <bedArrangement class="bedEdit" ref="bedArrangement"
                          v-if="roomStandard.rmTypeId === ROOM_TYPE.BEDROOM"
                          :bedsJson="roomStandard.bedGeometry"
                          :readOnly="true"
          />
        </el-col>
      </el-row>

    </div>

  </page-frame>
</template>

<script>
  import bedArrangement from '../../components/room/bedArrangement.vue'
  import roomApi from '../../service/corporation/roomApi'
  import {ROOM_TYPE} from '../../constants/roomConstants'
  export default {
    data () {
      return {
        roomStandard: {
          rmStdId: "",
          rmStdName: "",
          rmTypeId: "",
          rmTypeName: "",
          price: "",
          bedCount: "",
          bedGeometry: "",
          rmStdArea: "",
          rmEq: "",
          description: "",
        },
        ROOM_TYPE,
      }
    },
    methods: {
      init() {
        this.getData();
      },
      getData() {
        roomApi.getRoomStandard(this.$route.params.rmStdId).then(res => {
          this.roomStandard = res.body.data;
        }, res => {});
      },
      toRoomStandard() {
        this.$router.push({name: 'roomStandard'});
      },
    },
    mounted: function () {
      this.init();
    },
    components: {bedArrangement}
  }
</script>
<style>
  .viewRoomStandard .span-style {
    position: absolute;
    margin-left: 5px;
    color: #8391a5
  }

  .viewRoomStandard .input input {
    display: inline-block;
  }

  .viewRoomStandard .room-left {
    font-size: 14px;
    color: red;
    margin-left: 10px;
  }

  .viewRoomStandard .room-info-left {
    font-size: 20px;
    margin: 60px 0 60px 20px;
  }

  .viewRoomStandard .input-style {
    width: 50% !important;
  }

  .viewRoomStandard .el-form-item__label {
    font-size: 16px;
  }
</style>
